<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>访客管理 - 智慧园区</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            background-color: #f5f5f5;
            height: 100vh;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        
        .ios-status-bar {
            height: 44px;
            background-color: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
            display: flex;
            align-items: center;
            padding: 0 16px;
            position: relative;
            z-index: 50;
        }
        
        .ios-status-bar.dark {
            background-color: rgba(30, 30, 30, 0.9);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .ios-nav-bar {
            height: 44px;
            background-color: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
            display: flex;
            align-items: center;
            padding: 0 16px;
            position: relative;
        }
        
        .ios-nav-bar.dark {
            background-color: rgba(30, 30, 30, 0.9);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .glass-card {
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border-radius: 20px;
            border: 1px solid rgba(255, 255, 255, 0.3);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
        }
        
        .glass-card.dark {
            background: rgba(30, 30, 30, 0.7);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .main-content {
            height: calc(100vh - 88px); /* 状态栏 + 导航栏的高度 */
            overflow-y: auto;
            -ms-overflow-style: none;  /* IE and Edge */
            scrollbar-width: none;  /* Firefox */
            padding-bottom: 20px;
        }
        
        .main-content::-webkit-scrollbar {
            display: none;
        }
        
        .tab-item {
            padding: 12px 0;
            font-size: 15px;
            font-weight: 500;
            color: #6b7280;
            text-align: center;
            position: relative;
        }
        
        .tab-item.active {
            color: #3b82f6;
            font-weight: 600;
        }
        
        .tab-item.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 25%;
            width: 50%;
            height: 3px;
            background-color: #3b82f6;
            border-radius: 3px;
        }
        
        .tab-item.dark {
            color: #9ca3af;
        }
        
        .tab-item.active.dark {
            color: #60a5fa;
        }
        
        .tab-item.active.dark::after {
            background-color: #60a5fa;
        }
        
        .status-badge {
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 500;
        }
        
        .status-badge-green {
            background-color: rgba(16, 185, 129, 0.1);
            color: #10b981;
        }
        
        .status-badge-yellow {
            background-color: rgba(245, 158, 11, 0.1);
            color: #f59e0b;
        }
        
        .status-badge-red {
            background-color: rgba(239, 68, 68, 0.1);
            color: #ef4444;
        }
        
        .status-badge-blue {
            background-color: rgba(59, 130, 246, 0.1);
            color: #3b82f6;
        }
        
        .status-badge-gray {
            background-color: rgba(107, 114, 128, 0.1);
            color: #6b7280;
        }
        
        .status-badge-green.dark {
            background-color: rgba(16, 185, 129, 0.2);
            color: #34d399;
        }
        
        .status-badge-yellow.dark {
            background-color: rgba(245, 158, 11, 0.2);
            color: #fbbf24;
        }
        
        .status-badge-red.dark {
            background-color: rgba(239, 68, 68, 0.2);
            color: #f87171;
        }
        
        .status-badge-blue.dark {
            background-color: rgba(59, 130, 246, 0.2);
            color: #60a5fa;
        }
        
        .status-badge-gray.dark {
            background-color: rgba(107, 114, 128, 0.2);
            color: #9ca3af;
        }
        
        .visitor-item {
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        }
        
        .visitor-item.dark {
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        }
        
        .visitor-item:last-child {
            border-bottom: none;
        }
        
        .form-input {
            width: 100%;
            padding: 12px 16px;
            background-color: rgba(243, 244, 246, 0.8);
            border: 1px solid transparent;
            border-radius: 12px;
            font-size: 15px;
            color: #1f2937;
            transition: all 0.2s;
        }
        
        .form-input:focus {
            outline: none;
            border-color: #3b82f6;
            background-color: rgba(243, 244, 246, 0.9);
        }
        
        .form-input.dark {
            background-color: rgba(55, 65, 81, 0.8);
            color: #f9fafb;
        }
        
        .form-input.dark:focus {
            border-color: #60a5fa;
            background-color: rgba(55, 65, 81, 0.9);
        }
        
        .form-label {
            display: block;
            font-size: 14px;
            font-weight: 500;
            color: #4b5563;
            margin-bottom: 6px;
        }
        
        .form-label.dark {
            color: #d1d5db;
        }
        
        .qr-code {
            width: 200px;
            height: 200px;
            background-color: white;
            padding: 10px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }
        
        .qr-code img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
        
        .qr-code::after {
            content: '';
            position: absolute;
            top: -4px;
            left: -4px;
            right: -4px;
            bottom: -4px;
            border: 2px dashed #e5e7eb;
            z-index: -1;
        }
        
        .qr-code.dark::after {
            border-color: #4b5563;
        }
        
        /* 暗色模式样式 */
        .dark-mode .glass-card {
            background: rgba(30, 30, 30, 0.7);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .dark-mode .ios-status-bar {
            background-color: rgba(30, 30, 30, 0.9);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .dark-mode .ios-nav-bar {
            background-color: rgba(30, 30, 30, 0.9);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .dark-mode .tab-item {
            color: #9ca3af;
        }
        
        .dark-mode .tab-item.active {
            color: #60a5fa;
        }
        
        .dark-mode .tab-item.active::after {
            background-color: #60a5fa;
        }
        
        .dark-mode .status-badge-green {
            background-color: rgba(16, 185, 129, 0.2);
            color: #34d399;
        }
        
        .dark-mode .status-badge-yellow {
            background-color: rgba(245, 158, 11, 0.2);
            color: #fbbf24;
        }
        
        .dark-mode .status-badge-red {
            background-color: rgba(239, 68, 68, 0.2);
            color: #f87171;
        }
        
        .dark-mode .status-badge-blue {
            background-color: rgba(59, 130, 246, 0.2);
            color: #60a5fa;
        }
        
        .dark-mode .status-badge-gray {
            background-color: rgba(107, 114, 128, 0.2);
            color: #9ca3af;
        }
        
        .dark-mode .visitor-item {
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        }
        
        .dark-mode .form-input {
            background-color: rgba(55, 65, 81, 0.8);
            color: #f9fafb;
        }
        
        .dark-mode .form-input:focus {
            border-color: #60a5fa;
            background-color: rgba(55, 65, 81, 0.9);
        }
        
        .dark-mode .form-label {
            color: #d1d5db;
        }
        
        .dark-mode .qr-code::after {
            border-color: #4b5563;
        }
    </style>
</head>
<body>
    <div id="app" class="relative h-full">
        <!-- iOS 状态栏 -->
        <div class="ios-status-bar">
            <div class="flex justify-between items-center w-full">
                <div class="text-sm font-medium text-gray-800 dark:text-gray-200">9:41</div>
                <div class="flex space-x-2">
                    <i class="fas fa-signal text-gray-800 dark:text-gray-200"></i>
                    <i class="fas fa-wifi text-gray-800 dark:text-gray-200"></i>
                    <i class="fas fa-battery-full text-gray-800 dark:text-gray-200"></i>
                </div>
            </div>
        </div>
        
        <!-- iOS 导航栏 -->
        <div class="ios-nav-bar">
            <div class="flex justify-between items-center w-full">
                <div class="flex items-center">
                    <i class="fas fa-chevron-left text-blue-500 dark:text-blue-400 mr-2"></i>
                    <span class="text-gray-800 dark:text-gray-200">返回</span>
                </div>
                <div class="text-lg font-semibold text-gray-800 dark:text-gray-200">访客管理</div>
                <div class="w-16 flex justify-end">
                    <i class="fas fa-ellipsis-h text-blue-500 dark:text-blue-400"></i>
                </div>
            </div>
        </div>
        
        <!-- 主内容 -->
        <div class="main-content bg-gray-50 dark:bg-gray-900">
            <!-- 选项卡 -->
            <div class="bg-white dark:bg-gray-800 border-t border-b border-gray-200 dark:border-gray-700">
                <div class="flex">
                    <div class="tab-item active flex-1">访客预约</div>
                    <div class="tab-item flex-1">访客记录</div>
                    <div class="tab-item flex-1">通行码</div>
                </div>
            </div>
            
            <!-- 访客预约内容 -->
            <div class="px-4 pt-4 pb-3">
                <!-- 快速操作 -->
                <div class="flex space-x-3 mb-4">
                    <button class="flex-1 py-2.5 bg-blue-500 dark:bg-blue-600 text-white font-medium rounded-full flex items-center justify-center">
                        <i class="fas fa-plus-circle mr-2"></i> 新增访客
                    </button>
                    <button class="flex-1 py-2.5 bg-white dark:bg-gray-800 border border-blue-500 dark:border-blue-400 text-blue-500 dark:text-blue-400 font-medium rounded-full flex items-center justify-center">
                        <i class="fas fa-qrcode mr-2"></i> 扫码登记
                    </button>
                </div>
                
                <!-- 访客预约列表 -->
                <div class="glass-card overflow-hidden mb-4">
                    <div class="p-4 visitor-item">
                        <div class="flex justify-between items-start mb-2">
                            <div>
                                <div class="text-base font-medium text-gray-800 dark:text-gray-200">李明</div>
                                <div class="text-xs text-gray-500 dark:text-gray-400 mt-1">预约时间: 今天 14:30-16:00</div>
                            </div>
                            <div class="status-badge status-badge-yellow">待审核</div>
                        </div>
                        <div class="flex justify-between items-center mt-3">
                            <div class="text-xs text-gray-500 dark:text-gray-400">
                                <i class="fas fa-user-tie mr-1"></i> 来访事由: 业务洽谈
                            </div>
                            <div class="flex space-x-2">
                                <button class="px-3 py-1 bg-red-500 dark:bg-red-600 text-white text-xs rounded-full">
                                    拒绝
                                </button>
                                <button class="px-3 py-1 bg-green-500 dark:bg-green-600 text-white text-xs rounded-full">
                                    通过
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <div class="p-4 visitor-item">
                        <div class="flex justify-between items-start mb-2">
                            <div>
                                <div class="text-base font-medium text-gray-800 dark:text-gray-200">王芳</div>
                                <div class="text-xs text-gray-500 dark:text-gray-400 mt-1">预约时间: 明天 10:00-11:30</div>
                            </div>
                            <div class="status-badge status-badge-green">已通过</div>
                        </div>
                        <div class="flex justify-between items-center mt-3">
                            <div class="text-xs text-gray-500 dark:text-gray-400">
                                <i class="fas fa-user-tie mr-1"></i> 来访事由: 项目合作
                            </div>
                            <button class="px-3 py-1 bg-blue-500 dark:bg-blue-600 text-white text-xs rounded-full">
                                <i class="fas fa-share-alt mr-1"></i> 分享
                            </button>
                        </div>
                    </div>
                    
                    <div class="p-4">
                        <div class="flex justify-between items-start mb-2">
                            <div>
                                <div class="text-base font-medium text-gray-800 dark:text-gray-200">张伟</div>
                                <div class="text-xs text-gray-500 dark:text-gray-400 mt-1">预约时间: 2023-12-15 09:00-10:00</div>
                            </div>
                            <div class="status-badge status-badge-blue">已确认</div>
                        </div>
                        <div class="flex justify-between items-center mt-3">
                            <div class="text-xs text-gray-500 dark:text-gray-400">
                                <i class="fas fa-user-tie mr-1"></i> 来访事由: 设备维护
                            </div>
                            <div class="flex space-x-2">
                                <button class="px-3 py-1 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs rounded-full">
                                    取消
                                </button>
                                <button class="px-3 py-1 bg-blue-500 dark:bg-blue-600 text-white text-xs rounded-full">
                                    <i class="fas fa-share-alt mr-1"></i> 分享
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 新增访客表单 -->
                <div class="glass-card p-4 mb-4">
                    <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">新增访客</h2>
                    
                    <div class="mb-4">
                        <label class="form-label">访客姓名</label>
                        <input type="text" class="form-input" placeholder="请输入访客姓名">
                    </div>
                    
                    <div class="mb-4">
                        <label class="form-label">手机号码</label>
                        <input type="tel" class="form-input" placeholder="请输入手机号码">
                    </div>
                    
                    <div class="mb-4">
                        <label class="form-label">来访事由</label>
                        <select class="form-input">
                            <option>业务洽谈</option>
                            <option>项目合作</option>
                            <option>设备维护</option>
                            <option>面试</option>
                            <option>其他</option>
                        </select>
                    </div>
                    
                    <div class="mb-4">
                        <label class="form-label">来访时间</label>
                        <div class="grid grid-cols-2 gap-3">
                            <input type="date" class="form-input" value="2023-12-14">
                            <div class="grid grid-cols-2 gap-2">
                                <input type="time" class="form-input" value="10:00">
                                <input type="time" class="form-input" value="11:00">
                            </div>
                        </div>
                    </div>
                    
                    <div class="mb-4">
                        <label class="form-label">访问区域</label>
                        <select class="form-input">
                            <option>A区办公楼</option>
                            <option>B区会议中心</option>
                            <option>C区研发中心</option>
                            <option>D区生产车间</option>
                        </select>
                    </div>
                    
                    <div class="mb-4">
                        <label class="form-label">备注信息</label>
                        <textarea class="form-input" rows="3" placeholder="请输入备注信息（选填）"></textarea>
                    </div>
                    
                    <button class="w-full py-2.5 bg-blue-500 dark:bg-blue-600 text-white font-medium rounded-full">
                        提交预约
                    </button>
                </div>
                
                <!-- 访客通行码 -->
                <div class="glass-card p-4 mb-4">
                    <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-3 text-center">访客通行码</h2>
                    
                    <div class="qr-code mb-4">
                        <img src="https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=VISITOR-12345678" alt="访客通行码">
                    </div>
                    
                    <div class="text-center mb-4">
                        <div class="text-sm text-gray-500 dark:text-gray-400">访客码有效期</div>
                        <div class="text-base font-medium text-gray-800 dark:text-gray-200 mt-1">2023-12-14 10:00 - 11:00</div>
                    </div>
                    
                    <div class="flex justify-between">
                        <button class="flex-1 py-2 bg-white dark:bg-gray-800 border border-blue-500 dark:border-blue-400 text-blue-500 dark:text-blue-400 text-sm font-medium rounded-full mr-2">
                            <i class="fas fa-share-alt mr-1"></i> 分享
                        </button>
                        <button class="flex-1 py-2 bg-white dark:bg-gray-800 border border-blue-500 dark:border-blue-400 text-blue-500 dark:text-blue-400 text-sm font-medium rounded-full ml-2">
                            <i class="fas fa-download mr-1"></i> 保存
                        </button>
                    </div>
                </div>
                
                <!-- 访客记录 -->
                <h2 class="text-base font-semibold text-gray-800 dark:text-gray-200 mb-3">历史访客记录</h2>
                <div class="glass-card overflow-hidden">
                    <div class="p-4 visitor-item">
                        <div class="flex justify-between items-start">
                            <div>
                                <div class="text-base font-medium text-gray-800 dark:text-gray-200">刘强</div>
                                <div class="text-xs text-gray-500 dark:text-gray-400 mt-1">访问时间: 2023-12-10 15:30-16:45</div>
                                <div class="text-xs text-gray-500 dark:text-gray-400 mt-1">来访事由: 设备安装</div>
                            </div>
                            <div class="status-badge status-badge-gray">已结束</div>
                        </div>
                    </div>
                    
                    <div class="p-4 visitor-item">
                        <div class="flex justify-between items-start">
                            <div>
                                <div class="text-base font-medium text-gray-800 dark:text-gray-200">赵丽</div>
                                <div class="text-xs text-gray-500 dark:text-gray-400 mt-1">访问时间: 2023-12-08 10:00-11:30</div>
                                <div class="text-xs text-gray-500 dark:text-gray-400 mt-1">来访事由: 项目洽谈</div>
                            </div>
                            <div class="status-badge status-badge-gray">已结束</div>
                        </div>
                    </div>
                    
                    <div class="p-4">
                        <div class="flex justify-between items-start">
                            <div>
                                <div class="text-base font-medium text-gray-800 dark:text-gray-200">陈明</div>
                                <div class="text-xs text-gray-500 dark:text-gray-400 mt-1">访问时间: 2023-12-05 14:00-15:00</div>
                                <div class="text-xs text-gray-500 dark:text-gray-400 mt-1">来访事由: 面试</div>
                            </div>
                            <div class="status-badge status-badge-gray">已结束</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script>
        // 检测系统暗色模式
        if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
            document.body.classList.add('dark-mode');
            document.querySelectorAll('.ios-status-bar, .ios-nav-bar, .glass-card, .tab-item, .status-badge-green, .status-badge-yellow, .status-badge-red, .status-badge-blue, .status-badge-gray, .visitor-item, .form-input, .form-label, .qr-code').forEach(el => {
                el.classList.add('dark');
            });
        }
        
        // 监听系统暗色模式变化
        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
            if (e.matches) {
                document.body.classList.add('dark-mode');
                document.querySelectorAll('.ios-status-bar, .ios-nav-bar, .glass-card, .tab-item, .status-badge-green, .status-badge-yellow, .status-badge-red, .status-badge-blue, .status-badge-gray, .visitor-item, .form-input, .form-label, .qr-code').forEach(el => {
                    el.classList.add('dark');
                });
            } else {
                document.body.classList.remove('dark-mode');
                document.querySelectorAll('.ios-status-bar, .ios-nav-bar, .glass-card, .tab-item, .status-badge-green, .status-badge-yellow, .status-badge-red, .status-badge-blue, .status-badge-gray, .visitor-item, .form-input, .form-label, .qr-code').forEach(el => {
                    el.classList.remove('dark');
                });
            }
        });
    </script>
</body>
</html> 